window.onload = function () {
  // 获取dom元素
  let pointer = document.querySelector(".pointer")
  let hour_pointer = document.querySelector(".hour")
  let minute_pointer = document.querySelector(".minute")
  let second_pointer = document.querySelector(".second")


  function getTimeToDom() {
    let date = new Date();
    let hour = date.getHours();
    let minute = date.getMinutes();
    let second = date.getSeconds();
    second_pointer.style.transform = `rotate(${6 * second}deg)`;
    minute_pointer.style.transform = `rotate(${6 * minute}deg)`;
    hour_pointer.style.transform = `rotate(${30 * hour + minute / 60 * 30}deg)`;
  }
  // 初始化渲染一次
  getTimeToDom()
  // 获取正确的时间和角度后,再显示
  // 这里是为了当刷新或者第一次打开时,不会看到初始状态的指针得闪烁
  // 先在css中,将整个表盘隐藏
  // 然后在渲染好正确事件后,将表盘显示出来
  // 这样不断刷新,也不会看到指针的闪烁了,体验会好一些
  pointer.style.display = 'block'

  // 每秒更新表盘
  setInterval(() => {
    getTimeToDom()
  }, 1000);

  // 使鼠标能够按下拖动钟表
  let clock = document.querySelector(".clock")
  // 声明最终的快中心与鼠标位置的相对距离
  let x = 0;
  let y = 0;
  //制作一个点击时钟可以拖动的方法
  clock.addEventListener('mousedown',move())










  // 封装一个拖动函数
  function move() {
    return function (e) {
      // e.clientX 鼠标位于页面的横坐标
      // e.clientY 鼠标位于页面的纵坐标
      //this.offsetLeft 块中心距离窗口左侧的距离
      x = e.clientX - this.offsetLeft
      y = e.clientY - this.offsetTop
      document.onmousemove = function (e) {
        // 定义完成拖动后的坐标值
        newX = e.clientX-x
        newY = e.clientY-y
        clock.style.left = newX + 'px'
        clock.style.top = newY + 'px'
      }
  
      document.onmouseup = function() {
        // 鼠标弹起，注销之前的鼠标移动事件，同时弹起事件也一起注销
        document.onmousemove = null;
        document.onmouseup = null;
      };
      //阻止默认事件
      return false;
    }
  }





}